<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Accordion</title>

	<link href="../../../themes/common/dijit/dijit.css" rel="stylesheet"/>
	<link href="../../../themes/common/domButtons/DomButtonBlackRightArrow16.css" rel="stylesheet"/>
	<link href="../../../themes/common/domButtons/DomButtonWhiteDownArrow16.css" rel="stylesheet"/>
	<script type="text/javascript" src="../../../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','Accordion','TabBar','dijit.Calendar']"></script>
	<script type="text/javascript" src="../../../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true,  has: {'dojo-bidi': true }"></script>

	<script type="text/javascript">
		require([
			"dijit/registry",		
			"doh/runner",
			"dojo/dom",
			"dojo/ready",
			"dojo/query",		
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojox/mobile/Accordion",
			"dojox/mobile/ContentPane",
			"dojox/mobile/ScrollableView"		
			], function(registry,runner,dom,ready,query){
				ready(function(){
					runner.register("Bidi Accordion", [
						{
							name: "mobile",					
							runTest: function(){
								query(".mblAccordionTitleLabel").forEach(function(node, index, arr){
									runner.is(String.fromCharCode(8235), node.innerHTML.charAt(0), "node should have direction corresponding to 'textDir' property of Accordion container");	
								});								
							}
						}
					]);	 			
					
					runner.register("log", function(){
						dom.byId('failures').innerHTML = runner._failureCount;
						dom.byId('errors').innerHTML = runner._errorCount;
					});

					runner.run();
				});
		});
	</script>

	<style type="text/css">
		html,body{
			height: 100%;
		}
		.myPane {
			background-image: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(#FFFFFF));
			font-family: Times New Roman, Helvetica;
			color: black;
		}
	</style>
</head>
<body style="visibility:hidden;">
		<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">	
			<div data-dojo-type="dojox.mobile.Accordion" data-dojo-props='textDir: "rtl",singleOpen:true, roundRect:true' style="height:400px;">
				<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"External Content!", icon1:"mblDomButtonBlackRightArrow16", icon2:"mblDomButtonWhiteDownArrow16", href:"../../data/fragment1.html"'>
				</div>
				<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"RoundRectList!",icon1:"mblDomButtonBlackRightArrow16", icon2:"mblDomButtonWhiteDownArrow16"'>
					<ul data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='textDir:"rtl",iconBase:"../../images/tab-icon-11h.png"'>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
							u1space!
						</li>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
							u2space!
						</li>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
							Wi-Fi!
						</li>
					</ul>
				</div>
				<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"Dojo!", icon1:"mblDomButtonBlackRightArrow16", icon2:"mblDomButtonWhiteDownArrow16"' class="myPane">
					<div style="padding:10px">
						<div style="font-size: 24px">Unbeatable JavaScript Tools</div>
						<div style="border-top: 1px dashed gray;margin: 20px"></div>
						<img alt="" src="../../images/dojo-logo1.png" style="float:left;margin-right:5px">
						<p>Dojo saves you time, delivers powerful performance, and scales with your development process. It's the toolkit experienced developers turn to for building superior desktop and mobile web experiences.</p>
						<p>Dojo's powerful, lightweight core makes common tasks quicker and easier. Animate elements, manipulate the DOM, and query with easy CSS syntax, all without sacrificing performance.</p>
					</div>
				</div>
			</div>
		</div>
	<br>Errors:&nbsp;<span id="errors">?</span>
	<br>Failures:&nbsp;<span id="failures">?</span>		
</body>
</html>
